import React from 'react';
import AmisRenderer from '@/components/AmisRenderer';
import type { SchemaNode } from 'amis/lib/types';

const AmisDemo: React.FC = () => {
  // 定义一个复杂的页面配置，展示 amis 的各种功能
  const schema: SchemaNode = {
    "type": "crud2",
    "id": "u:7cf2c66ace98",
    "mode": "table2",
    "dsType": "api",
    "syncLocation": true,
    "primaryField": "id",
    "loadType": "pagination",
    "api": {
      "url": "/api/rule",
      "method": "get"
    },
    "filter": {
      "type": "form",
      "title": "条件查询",
      "mode": "inline",
      "columnCount": 3,
      "clearValueOnHidden": true,
      "behavior": [
        "SimpleQuery"
      ],
      "body": [
        {
          "name": "callNo",
          "label": "callNo",
          "type": "input-text",
          "size": "full",
          "required": false,
          "behavior": "SimpleQuery",
          "id": "u:a8504adf636f"
        },
        {
          "name": "desc",
          "label": "desc",
          "type": "input-text",
          "size": "full",
          "required": false,
          "behavior": "SimpleQuery",
          "id": "u:cc93c86cacb5"
        }
      ],
      "actions": [
        {
          "type": "reset",
          "label": "重置",
          "id": "u:99f1fbe63ae6"
        },
        {
          "type": "submit",
          "label": "查询",
          "level": "primary",
          "id": "u:9a5c56546b1c"
        }
      ],
      "id": "u:89974d114764",
      "feat": "Insert"
    },
    "headerToolbar": [
      {
        "type": "flex",
        "direction": "row",
        "justify": "flex-start",
        "alignItems": "stretch",
        "style": {
          "position": "static"
        },
        "items": [
          {
            "type": "container",
            "align": "left",
            "behavior": [
              "Insert",
              "BulkEdit",
              "BulkDelete"
            ],
            "body": [],
            "wrapperBody": false,
            "style": {
              "flexGrow": 1,
              "flex": "1 1 auto",
              "position": "static",
              "display": "flex",
              "flexBasis": "auto",
              "flexDirection": "row",
              "flexWrap": "nowrap",
              "alignItems": "stretch",
              "justifyContent": "flex-start"
            },
            "id": "u:cae9b2af66ea"
          },
          {
            "type": "container",
            "align": "right",
            "behavior": [
              "FuzzyQuery"
            ],
            "body": [],
            "wrapperBody": false,
            "style": {
              "flexGrow": 1,
              "flex": "1 1 auto",
              "position": "static",
              "display": "flex",
              "flexBasis": "auto",
              "flexDirection": "row",
              "flexWrap": "nowrap",
              "alignItems": "stretch",
              "justifyContent": "flex-end"
            },
            "id": "u:c22f317d5447"
          }
        ],
        "id": "u:807272cb0f23"
      }
    ],
    "footerToolbar": [
      {
        "type": "flex",
        "direction": "row",
        "justify": "flex-start",
        "alignItems": "stretch",
        "style": {
          "position": "static"
        },
        "items": [
          {
            "type": "container",
            "align": "left",
            "body": [],
            "wrapperBody": false,
            "style": {
              "flexGrow": 1,
              "flex": "1 1 auto",
              "position": "static",
              "display": "flex",
              "flexBasis": "auto",
              "flexDirection": "row",
              "flexWrap": "nowrap",
              "alignItems": "stretch",
              "justifyContent": "flex-start"
            },
            "id": "u:ecbf2863bd99"
          },
          {
            "type": "container",
            "align": "right",
            "body": [
              {
                "type": "pagination",
                "behavior": "Pagination",
                "layout": [
                  "total",
                  "perPage",
                  "pager"
                ],
                "perPage": 10,
                "perPageAvailable": [
                  10,
                  20,
                  50,
                  100
                ],
                "align": "right",
                "id": "u:cb2ef48fdf96"
              }
            ],
            "wrapperBody": false,
            "style": {
              "flexGrow": 1,
              "flex": "1 1 auto",
              "position": "static",
              "display": "flex",
              "flexBasis": "auto",
              "flexDirection": "row",
              "flexWrap": "nowrap",
              "alignItems": "stretch",
              "justifyContent": "flex-end"
            },
            "id": "u:7d809a2736b0"
          }
        ],
        "id": "u:bed8534cf727"
      }
    ],
    "columns": [
      {
        "type": "tpl",
        "title": "callNo",
        "name": "callNo",
        "id": "u:6cd34a9aa252"
      },
      {
        "type": "tpl",
        "title": "desc",
        "name": "desc",
        "id": "u:3b9e9f1195dd"
      }
    ],
    "editorSetting": {
      "mock": {
        "enable": true,
        "maxDisplayRows": 5
      }
    }
  };

  return <AmisRenderer schema={schema} />;
};

export default AmisDemo;